<template>
  <VideoList ref="videoListRef" :baseOptions="baseOptions"></VideoList>
</template>
<script setup>
import VideoList from '@/components/video/VideoList.vue';
import { ref } from 'vue';
const baseOptions = ref({
  url: '/video/search',
  params: {
    content: new URL(window.location.href).searchParams.get('content'),
    // sortBy: null,
    // publishTimeRange: [null, null],
    // durationRange: [null, null],
    // categoryId: null,
  }
})




const videoListRef = ref(null)
import { emitter } from '@/script/eventBus'
import { onMounted, onUnmounted } from 'vue'
onMounted(() => {
  emitter.on('searchContentUpdated', handleTextChange)
})
onUnmounted(() => {
  emitter.off('searchContentUpdated', handleTextChange)
})
function handleTextChange(content) {
  baseOptions.value.params.content = content
  videoListRef.value.load()
}

onMounted(() => {
  handleTextChange(baseOptions.value.params.content)
})




</script>